Añadiendo clases

Esta entrada es un brevísimo resumen sobre una útil entrada de Vagabundia que recomiendo y a la que tuve que recurrir para despejar algunas dudas.

Es algo muy básico, una de esas cosas hacemos automáticamente copiando y pegando pero no siempre resulta bien por eso es mejor entender lo que estamos haciendo.

En la hoja de estilos de nuestra plantilla podemos ver las propiedades de distinta forma. Reconocemos que se trata de una clase por ese punto antes del nombre de la clase.

.post {
.....
}

Si en lugar del punto llevara una almohadilla # estaríamos hablando de un ID eso quiere decir que se trata de un identificador único, no puede haber dos iguales en la plantilla.

#header-wrapper {
...............
}

A veces nos vemos en la necesidad de crear unos estilos distintos a los predeterminados en la plantilla para utilizarlos en una etiqueta concreta.
En el body de nuestra plantilla encontraremos los estilos definidos para el texto del blog y los enlaces.
Si queremos por ejemplo utilizar un color distinto para el texto seguramente lo que hacemos es modificarlo en el mismo editor de entradas en la pestaña "Redactar" pero ¿ y si queremos un color que no se encuentra en la paleta de colores? ¿y si ese color de texto lo queremos añadir en un gadget?

Hacemos unas pruebas y jugamos un poco con los estilos y las clases.

.rosa {
color:#ff00BB;
}

En nuestro editor de entradas o donde queremos tener el texto de color añadimos:
<p class="rosa">Texto rosa</p>

Texto rosa

Podemos añadir más propiedades a una misma clase y tantas clases como necesitemos usar para una misma etiqueta.

.rosa {
color:#ff00BB;
font-size: 20px;
font-weight:bold;
}

<p class="rosa">Texto rosa</p>

Texto rosa

Cuando añadimos una clase todas las etiquetas que contienen esa clase adquieren los mismos estilos. Para añadir estilos a un enlace añadimos:

a.rosa {
color:#FF00BB;
}

<a href="#" class="rosa"> Esto es un enlace de color rosa </a>

Esto es un enlace de color rosa

Igualmente podemos añadir efectos a la misma clase.

.rosa {
color:#ff00BB;
font-size: 34px;
font-weight:bold;
text-shadow: #000000 1px 2px 3px;
font-family:Times New Roman,sans-serif;
}

.rosa:hover {
color:#000000;
font-weight:bold;
font-style:italic;
font-size: 34px;
font-weight:bold;
text-shadow: #000000 1px 2px 3px;
font-family:Times New Roman,sans-serif;
}

<p class="rosa">¿ Texto rosa ?</p>

¿ Texto rosa ?